<template>
    <div class="main" v-if="props.visible">
        <div>我是area选择器</div>
        <div class="tabs">
            <div class="th">
                <div :class=" cur===1?'ac':'' " @click="cur=1">省</div>
                <div :class=" cur===2?'ac':'' " @click="cur=2">市</div>
                <div :class=" cur===3?'ac':'' " @click="cur=3">区</div>
            </div>
            <div class="ct">
                <div v-show="cur==1">
                    <div class="it"
                         @click="selectProvince(item.label)"
                         v-for="item  of provinces" 
                         :key="item.value"
                         :class="{ ac : areaData[0] === item.label }"
                    >
                        {{ item.label }}
                    </div>
                </div>
                <div v-show="cur==2">
                    <div 
                        class="it"
                        @click="selectCity(item.label)"  
                        v-for="item of cityList" :key="item.value"
                        :class="{ ac : areaData[1] === item.label }"
                    >
                         {{ item.label }}
                    </div> 
                </div>
                <div v-show="cur==3">
                    <div class="it" v-for="item of zoneList"
                        @click="selectZone(item.label)"
                        :class="{ ac : areaData[2] === item.label }"
                    >
                        {{ item.label }}
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<script setup>
    import { regionDataPlus } from 'element-china-area-data'

    import { ref,reactive,computed ,watch,defineEmits,defineProps, onMounted, onBeforeUpdate} from 'vue';

    
    const props = defineProps({
        visible: {
            type: Boolean,
            default: false
        }
    })
    



    console.log('regionDataPlus',regionDataPlus)
    const cur = ref(1);
    const provinces =  reactive(regionDataPlus);
    const  areaData = reactive(['全部','','']);

    // 获取当前的省份信息
    const curPrvince = computed(()=>{
       return  regionDataPlus.find(item=> {
           return  item.label == areaData[0]
        })
    })
    const cityList = ref([]);
    watch(curPrvince,(nv)=>{
        // 如果选中的省份有变化的
        cityList.value = nv.children;
    })

    const curCity = computed(()=>{
           return cityList.value.find(item=>item.label ===  areaData[1]) 
    })

    const zoneList = ref([]);
    watch(curCity,(nv)=>{
        console.log('当前选中的城市',nv)
        if(nv) zoneList.value = nv.children || []
       
    })



    const selectProvince = res=> { 
        areaData[0] = res;
        areaData[1] = '';
        if(res!=='全部') cur.value = 2;
    };

    const selectCity = res=> { 
        areaData[1] = res;
        if(res!=='全部') cur.value = 3;
    };

    
    const emit = defineEmits(['onchange'])
    const selectZone = res=>{
        areaData[2] = res;
        emit('onchange',areaData)
        // show.value = false;
    }



</script>

<style lang="scss" scoped>  
// lang表示使用的 预处理器
// scoped 局部样式  表示当前样式只在当前组件内有效
.main{
    height: 100vh;
    width: 100vw;
    position: fixed;
    left:0;
    top:0;
    background: #f3f3f3;
    display: flex;
    flex-direction: column;
}
.tabs{  

    flex:1;
    display: flex;
    flex-direction: column;

    .th{
        line-height: 45px;
        display: flex;
        width: 100vw;
        &>div{
           width: 0;
           flex-grow: 1;
           text-align: center;
        }
    }
    .ac{
        background: #8f8f8f;
    }
    .ct{
        height: 0;
        flex-grow: 1;
        border: 1px solid red;
        &>div{
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: flex-start;
            .it{
             width: 28%;
             padding:5px;
             background: #fff;
             border-radius: 3px;
             border:1px solid #ddd;
             line-height: 2;
             font-size: 16px;
             text-align: center;
             height: 32px;
             overflow: hidden;
             margin-top: 10px;

            }
            .it.ac{
                border:1px solid red;
            }
        }
    }

}

</style>